<script setup lang="ts">
import {ref, watch} from "vue";

const props = defineProps(['loading', 'data'])

// 向公司收取
const customerFeeSettlementCollect = ref<{name: string; type: number; price: number; qty: number; showTooltip: boolean}[]>([])

// 向公司支付
const customerFeeSettlementPay = ref<{name: string; type: number; price: number; qty: number; showTooltip: boolean}[]>([])

// 向部门收取
const networkFeeSettlementCollect = ref<{name: string; type: number; price: number; qty: number; showTooltip: boolean}[]>([])

// 向部门支付
const networkFeeSettlementPay = ref<{name: string; type: number; price: number; qty: number; showTooltip: boolean}[]>([])

// 公司结算费用总额
const customerFeeSettlementTotalFee = ref(0)

// 部门结算费用总额
const networkFeeSettlementTotalFee = ref(0)

// 收款总额
const collectTotalFee = ref(0);

// 支付总额
const payTotalFee = ref(0);

// 获取内容长度和容器长度，当内容长度大于容器长度时就是显示文字提示
const onGetTextLength = (event: Event, index: number, type: 1 | 2 | 3 | 4) => {
  if ((event.target as HTMLElement).scrollWidth > (event.target as HTMLElement).offsetWidth) {
    switch (type) {
      case 1:
        customerFeeSettlementCollect.value[index].showTooltip = !customerFeeSettlementCollect.value[index].showTooltip
        break;
      case 2:
        customerFeeSettlementPay.value[index].showTooltip = !customerFeeSettlementPay.value[index].showTooltip
        break;
      case 3:
        networkFeeSettlementCollect.value[index].showTooltip = !networkFeeSettlementCollect.value[index].showTooltip
        break;
      case 4:
        networkFeeSettlementPay.value[index].showTooltip = !networkFeeSettlementPay.value[index].showTooltip
        break;
    }
  }
}

watch(
    props,
    (value) => {
      if (value.data) {
        collectTotalFee.value = 0
        payTotalFee.value = 0

        customerFeeSettlementCollect.value = []
        customerFeeSettlementPay.value = []
        // 将向公司收取和向公司支付分类放置，方便界面渲染
        value.data.customerFeeSettlement.forEach((item) => {
          switch (item.type) {
            case 3:
              customerFeeSettlementCollect.value.push({...item, showTooltip: false})
              collectTotalFee.value += item.price
              break;
            case 4:
              customerFeeSettlementPay.value.push({...item, showTooltip: false})
              payTotalFee.value += item.price
              break;
          }
        })

        networkFeeSettlementCollect.value = []
        networkFeeSettlementPay.value = []
        // 将向部门收取和向部门支付分类放置，方便界面渲染
        value.data.networkFeeSettlement.forEach((item) => {
          switch (item.type) {
            case 1:
              networkFeeSettlementCollect.value.push({...item, showTooltip: false})
              collectTotalFee.value += item.price
              break;
            case 2:
              networkFeeSettlementPay.value.push({...item, showTooltip: false})
              payTotalFee.value += item.price
              break;
          }
        })

        // 统计公司结算费用总额
        const customerFeeSettlementCollectTotalFee = customerFeeSettlementCollect.value.reduce(
            (accumulator, currentValue) => accumulator + currentValue.price,
            0,
        );
        const customerFeeSettlementPayTotalFee = customerFeeSettlementPay.value.reduce(
            (accumulator, currentValue) => accumulator + currentValue.price,
            0,
        );
        customerFeeSettlementTotalFee.value = customerFeeSettlementCollectTotalFee - customerFeeSettlementPayTotalFee

        // 统计部门结算费用总额
        const networkFeeSettlementCollectTotalFee = networkFeeSettlementCollect.value.reduce(
            (accumulator, currentValue) => accumulator + currentValue.price,
            0,
        );
        const networkFeeSettlementPayTotalFee = networkFeeSettlementPay.value.reduce(
            (accumulator, currentValue) => accumulator + currentValue.price,
            0,
        );
        networkFeeSettlementTotalFee.value = networkFeeSettlementCollectTotalFee - networkFeeSettlementPayTotalFee
      }
    },
    {deep: true}
)
</script>

<template>
  <div class="order-total-fee">
    <table>
      <tr>
        <th>公司结算费用</th>
        <th>部门结算费用</th>
        <th>总费用</th>
      </tr>
      <tr>
        <td class="height-248">
          <div class="list-container">
            <div class="list">
              <el-scrollbar max-height="248px" always>
                <div>
                  <template v-for="(item, index) in customerFeeSettlementCollect" :key="item.name">
                    <div class="item">
                      <el-tooltip
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                        :show-after="100"
                        :offset="4"
                        :visible="item.showTooltip"
                      >
                        <div
                          class="name"
                          @mouseenter="onGetTextLength($event, index, 1)"
                          @mouseleave="onGetTextLength($event, index, 1)"
                        >{{item.name}}：</div>
                      </el-tooltip>
                      <div class="collect">+￥{{item.price.toFixed(2)}}</div>
                    </div>
                  </template>
                </div>
              </el-scrollbar>
            </div>
            <div class="list">
              <el-scrollbar max-height="248px">
                <div>
                  <template v-for="(item, index) in customerFeeSettlementPay" :key="item.name">
                    <div class="item">
                      <el-tooltip
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                        :show-after="100"
                        :offset="4"
                        :visible="item.showTooltip"
                      >
                        <div
                          class="name"
                          @mouseenter="onGetTextLength($event, index, 2)"
                          @mouseleave="onGetTextLength($event, index, 2)"
                        >{{item.name}}：</div>
                      </el-tooltip>
                      <div class="pay">-￥{{item.price.toFixed(2)}}</div>
                    </div>
                  </template>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </td>
        <td class="height-248">
          <div class="list-container">
            <div class="list">
              <el-scrollbar max-height="248px">
                <div>
                  <template v-for="(item, index) in networkFeeSettlementCollect" :key="item.name">
                    <div class="item">
                      <el-tooltip
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                        :show-after="100"
                        :offset="4"
                        :visible="item.showTooltip"
                      >
                        <div
                          class="name"
                          @mouseenter="onGetTextLength($event, index, 3)"
                          @mouseleave="onGetTextLength($event, index, 3)"
                        >{{item.name}}：</div>
                      </el-tooltip>
                      <div class="collect">+￥{{item.price.toFixed(2)}}</div>
                    </div>
                  </template>
                </div>
              </el-scrollbar>
            </div>
            <div class="list">
              <el-scrollbar max-height="248px">
                <div>
                  <template v-for="(item, index) in networkFeeSettlementPay" :key="item.name">
                    <div class="item">
                      <!-- 鼠标往上移动，有时会闪一下 -->
                      <el-tooltip
                        effect="dark"
                        :content="item.name"
                        placement="top-start"
                        :visible="item.showTooltip"
                        :offset="4"
                        :show-after="0"
                      >
                        <div
                          class="name"
                          @mouseenter="onGetTextLength($event, index, 4)"
                          @mouseleave="onGetTextLength($event, index, 4)"
                        >{{item.name}}：</div>
                      </el-tooltip>
                      <div class="pay">-￥{{item.price.toFixed(2)}}</div>
                    </div>
                  </template>
                </div>
              </el-scrollbar>
            </div>
          </div>
        </td>
        <td class="height-248 font-weight-600">
          <div class="border-none flex width-100 height-100">
            <span>收款总金额：</span>
            <span>￥{{collectTotalFee}}</span>
          </div>
        </td>
      </tr>
      <tr>
        <td class="font-weight-600">
          <span>总金额：</span>
          <span v-if="customerFeeSettlementTotalFee > 0" class="collect">+￥{{customerFeeSettlementTotalFee}}</span>
          <span v-else-if="customerFeeSettlementTotalFee < 0">-￥{{Math.abs(customerFeeSettlementTotalFee)}}</span>
          <span v-else>￥{{customerFeeSettlementTotalFee}}</span>
        </td>
        <td class="font-weight-600">
          <span>总金额：</span>
          <span v-if="networkFeeSettlementTotalFee > 0" class="collect">+￥{{networkFeeSettlementTotalFee}}</span>
          <span v-else-if="networkFeeSettlementTotalFee < 0">-￥{{Math.abs(networkFeeSettlementTotalFee)}}</span>
          <span v-else>￥{{networkFeeSettlementTotalFee}}</span>
        </td>
        <td class="font-weight-600">
          <span>付款总金额：</span>
          <span>￥{{payTotalFee}}</span>
        </td>
      </tr>
    </table>
  </div>
</template>

<style scoped lang="scss">
table {
  width: 100%;
  height: 100%;
  border-collapse: collapse;
  border: 1px solid rgba(234, 239, 248, 1.0);

  tr {
    width: 100%;
    display: grid;
    grid-template-columns: 40% 40% 20%;

    th {
      height: 38px;
      font-size: 15px;
      background-color: rgb(245, 247, 250, 1.0);
      border: 1px solid rgba(234, 239, 248, 1.0);
      color: rgba(100, 100, 100, 1.0);
      display: flex;
      justify-content: center;
      align-items: center;
    }

    td {
      box-sizing: border-box;
      border: 1px solid rgba(234, 239, 248, 1.0);
      padding: 10px 20px;

      .list-container {
        width: 100%;
        gap: 18px;
        display: grid;
        grid-template-columns: repeat(2, calc((100% - 18px) / 2));

        .list {
          height: 228px;

          .item {
            width: 100%;
            height: 28px;
            cursor: pointer;
            white-space: nowrap;
            display: flex;
            box-sizing: border-box;
            padding: 0 7%;
            gap: 6px;

            div {
              text-align: center;
              line-height: 28px;
            }

            .name {
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
      }
    }
  }
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.height-248 {
  height: 248px;
}

.width-100 {
  width: 100%;
}

.height-100 {
  height: 100%;
}

.flex {
  display: flex;
}

.flex-column {
  flex-direction: column;
}

.justify-center {
  justify-content: center;
}

.align-center {
  align-items: center;
}

.center {
  justify-content: center;
  align-items: center;
}

.font-12 {
  font-size: 12px;
}

.pay {
  color: $deleteColor;
}

.collect {
  color: $secondColor3;
}

.font-weight-600 {
  font-weight: 600 !important;
}
</style>